<template>
    <el-container >
        <el-container>
            <el-row style="width: 23%;position: absolute;">
                <el-col  class="aside">
                    <el-aside style="padding-top:10px;width: 23%;">

                        <el-input style="margin-top:10px;width:70%;margin-left: -100px"
                                  placeholder="请输入你想要搜索的内容"
                                  prefix-icon="el-icon-search"
                                  v-model="input">
                        </el-input>

                        <el-button style="width:20%;padding: 2px;height: 35px;margin-right: -80px;margin-left: 5px;" type="primary" @click="getspecial">搜索</el-button>
                        <el-tree
                                :data="treelist"
                                :props="defaultProps"
                                node-key="id"
                                ref="SlotMenuList"
                                :filter-node-method="filterNode"
                                accordion
                        >
            <span class="slot-t-node" slot-scope="{ node, data }">
              <span v-show="!node.isEdit">
                <span v-show="data.children && data.children.length >= 1">
                  <i :class="{ 'fa fa-plus-square': !node.expanded, 'fa fa-minus-square':node.expanded}" />
                  <span :class="[data.id >= maxexpandId ? 'slot-t-node--label' : '']">{{node.label}}</span>
                </span>
                <span v-show="!data.children || data.children.length == 0">
                  <i class='' style='margin-right:10px'></i>
                  <span :class="[data.id >= maxexpandId ? 'slot-t-node--label' : '']" @click="NID(data,k)">{{node.label}}</span>
                </span>
              </span>

            </span>
                        </el-tree>


                    </el-aside>
                </el-col>
            </el-row>

        </el-container>

        <el-container>

            <el-main style="margin-left: -28%;margin-top: -20px;width: 320%;">

                <el-container class="content">
                    <div>
                        <div style="text-align: left">
                            <div class="position" style="display: block">
                                <slot name="header"> <span>{{Cname}}</span></slot>
                                <hr>
                            </div>
                        </div>
                        <div>

                            <slot></slot>
                        </div>
                    </div>
                </el-container>
                <el-container>

                    <add v-bind:ID="CID" ref="modalForm"></add>

                </el-container>
            </el-main>

        </el-container>

    </el-container>

</template>

<script>
    import add from './add'
    import {knowlege_search} from "@/api/file";
    import ElCol from "element-ui/packages/col/src/col";
    let id = 1000;// eslint-disable-line no-unused-vars
    export default {
        components: { ElCol ,add},
        data() {
            const item = {
                tagID: "ID001",
                name: "地区",
                description: "此处是改内容的详细描述...",
                creatorID: "Admin",
                regeneratorID: "Admin"
            };
            return {
                Cname:'',
                treelist: [
                ],
                maxexpandId: 95,
                DATA: null,
                CID:-1,
                NODE: null,
                dialogNewFormVisible: false,
                dialogFormVisible: false,
                dialogClassifyVisible: false,
                tableData: Array(10).fill(item),
               // maxexpandId: this.maxexpandId,新增节点开始id
                non_maxexpandId: this.maxexpandId,//新增节点开始id(不更改)
                isLoadingTree: true,//是否加载节点树

                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                filterText: '',
                input: "",
                k:0,
                currentPage4: 4,
                editObj: {},
                menuVisible: false,
                objectID: null,
                /*分类修改*/
                objectID2: null
            };
        },
        methods: {
            NID(n,k){
                this.Cname=n.name;
                this.CID=n.id;
                console.log(this.CID);
                this.$refs.modalForm.getUrl(n.id,k);
            },
            filterNode(value, data) {
                console.log('value:',value)
                console.log('data:',data)
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
             getspecial(){
               knowlege_search('/KnowledgeProvider/knowlege_search/'+this.input).then(response => {
                     let treelist = [];

                     for (let i in response.data.data)
                         treelist.push(response.data.data[i]);

                     this.treelist = treelist;
                     console.log(this.treelist)
                 }).catch(error => {
                     console.log(error)
                 })
             }
            }
    }
</script>
<style scoped>
    .content {
        margin-left: -20px;
        background-color: #eeeeee;
        height: 20px;

    }

    .content .position {
        margin-left: 0px;
        font-weight: bold;
        font-size: 14px;
        margin-bottom: 10px;
    }
    /deep/ .el-input__inner {
        height: 22px;
        display: inline;
    }
    .el-aside {
        background-color: #000;
        color: #333;
        text-align: center;
        height:600px;
        position:absolute;
        width: 23%;
        margin-bottom: 0px;

    }

    .el-main {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        height:600px;



    }
   .el-col{
       width: 23%;
   }
    /*节点*/
    .slot-tree .slot-t-node--label{
        font-weight: 600;
    }
    /*按钮列表*/
    .slot-tree .slot-t-node .slot-t-icons{
        display: none;
        margin-left: 10px;
    }
    .slot-tree .slot-t-icons .el-button+.el-button{
        margin-left: 6px;
    }
    .slot-tree .el-tree-node__content:hover .slot-t-icons{
        display: inline-block;
    }
    .el-tree{
        padding-left: 20%;
        padding-right: 20%;
        background-color: #F5F5F5;
        font-size: 1.2rem;
    }


</style>
